import styled from "styled-components";

export const Container = styled.div`
    background-color: #fff;
    width: 9rem;
    margin-left: 0.5rem;
    height: 4.3rem;
    border-radius: 6px;
    box-sizing: border-box;
    padding-top: 0.3rem;
    .price{
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 1.2rem;
        width: 100%;
        box-sizing: border-box;
        padding: 0.2rem;
        .before{
            color: #d32d1e;
            font-size: 21px;
            font-weight: 700;
            font-family: Microsoft YaHei;
        }
        .now{
            box-sizing: border-box;
            margin-left: 0.2rem;
            font-family: Microsoft YaHei;
            background-color: #faeceb;
            height: 1rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            font-weight: 600;
            font-size: 14px;
            color: #d32d1e;
            padding: 0.2rem;
        }
    }
    .discount{
        width: 100%;
        height: 0.6rem;
        position: relative;
        .details{
            font-family: Microsoft YaHei;
            position: absolute;
            border: 2px solid #d32d1e;
            font-weight:600;
            color: #d32d1e;
            transform: scale(0.7);
        }
        .left{
            left:-0.2rem;
        }
        .right{
            left: 2rem;
        }
    }
    .titledetails{
        font-family: Microsoft YaHei;
        width: 100%;
        color: black;
        font-size: 18px;
        font-weight: 600;
        box-sizing: border-box;
        padding-left: 0.25rem;
        padding-right: 0.3rem;

        /* 字体个数超过两行就会省略 */
        word-break: break-all;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .promises{
        box-sizing: border-box;
        padding-left: 0.2rem;
        width: 100%;
        height: 0.8rem;
        background-color: #f0f0f4;
        display: flex;
        align-items: center;
        font-size:12px;
        font-family: Microsoft Yahei;
        font-weight: 500;
        color: #96999e;
        .promise{
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 100%;
            width: 2rem;
        }
    }
`